import * as React from "react";
import { Route, Switch, Redirect, HashRouter as Router } from "react-router-dom";
import { observer } from "mobx-react";
import { AliveScope } from "react-activation";
import { Space, SpinLoading } from "antd-mobile";
import ErrorBoundary from "pages/components/error";
import "./index.scss";
import "src/styles/style.scss";

const Login = React.lazy(() => import("../pages/login/index"));
const AdminRoute = React.lazy(() => import("../routes/admin/index"));

export const LoadingComponent = () => {
    return (
        <div className={"spin-loading"}>
            <SpinLoading color="primary" style={{ "--size": "48px" }} />
        </div>
    );
};

export default observer(function ({ store }) {
    return (
        <Router>
            <div className="routes-wrapper">
                <React.Suspense fallback={<LoadingComponent />}>
                    <Switch>
                        <Redirect to={`/home`} from={`/`} exact />
                        <Route
                            path={`/login`}
                            exact
                            component={props => (
                                <ErrorBoundary>
                                    <Login {...props} store={store} />
                                </ErrorBoundary>
                            )}
                        />
                        <AliveScope>
                            <Route
                                path={`/`}
                                component={props => <AdminRoute {...props} store={store} />}
                            />
                        </AliveScope>
                    </Switch>
                </React.Suspense>
            </div>
        </Router>
    );
});
